<template>
    <div class="SearchInput show">
        <div class="SearchLayout">
            <a-input allowClear v-model:value="store.search.key" placeholder="请输入关键字">
                <template #suffix>
                    <SearchOutlined />
                </template>
            </a-input>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue';
import { useStore } from '../../libs/store';
const store = useStore();

</script>

<style lang="less" scoped>
.SearchInput {
    height: 30px;
    margin: 10px;
    .SearchLayout {
        height: 100%;
        cursor: pointer;
        border-radius: 15px;
        position: relative;
        width: 100%;
        background-color: var(--main-FC);
    } 
    :deep(.ant-input-affix-wrapper){
        background-color: transparent;
        border: none;
    }
    :deep(.ant-input){
        background-color: transparent;
    }
    :deep(.anticon-close-circle) {
        margin: 0 7px;
    }
}
</style>